<template>
  <div class="allSonglistContainer container">
    <!-- 歌单分类 -->
    <div class="categoryContainer">
      <!-- 标题 -->
      <div class="title">
        <h1 @click="_changeCategory('全部')" class="pointer">
          全部分类 |
          <span style="font-size: 16px">
            当前：{{ slStore.currentSonglistCategory }}
          </span>
        </h1>
      </div>
      <dl>
        <dt>语种</dt>
        <dd
          v-for="(item, index) in yz"
          @click.stop="_changeCategory(item)"
          :class="{ ddActive: currentCategory === item }"
          :key="index"
        >
          {{ item }}
        </dd>
        <dt>风格</dt>
        <dd
          v-for="(item, index) in fg"
          @click.stop="_changeCategory(item)"
          :class="{ ddActive: currentCategory === item }"
          :key="index"
        >
          {{ item }}
        </dd>
        <dt>场景</dt>
        <dd
          v-for="(item, index) in cj"
          @click.stop="_changeCategory(item)"
          :class="{ ddActive: currentCategory === item }"
          :key="index"
        >
          {{ item }}
        </dd>
        <dt>情感</dt>
        <dd
          v-for="(item, index) in qg"
          @click.stop="_changeCategory(item)"
          :class="{ ddActive: currentCategory === item }"
          :key="index"
        >
          {{ item }}
        </dd>
        <dt>主题</dt>
        <dd
          v-for="(item, index) in zt"
          @click.stop="_changeCategory(item)"
          :class="{ ddActive: currentCategory === item }"
          :key="index"
        >
          {{ item }}
        </dd>
      </dl>
    </div>
    <!-- 歌单列表 -->
    <div class="songlist">
      <ul v-loading="loadingStatus">
        <li v-for="item in playlist" :key="item.id" class="floatLeft">
          <SonglistCard
            :id="item.id"
            :desc="item.name"
            :cover="item.coverImgUrl"
            :playCount="item.playCount"
            @click="toSonglistDetail(item.id)"
          />
        </li>
      </ul>
      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :small="false"
          :background="true"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script name="AllSonglist" setup>
import { allSonglistCategory, songlistByCategory } from '@/api/songlist';
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { useRouter, onBeforeRouteUpdate } from 'vue-router';
import songlistStore from '@/stores/songlistStore';
import SonglistCard from '@/components/SonglistCard.vue';

const router = useRouter();
const slStore = songlistStore();
const { proxy } = getCurrentInstance();

let currentCategory = ref(router.currentRoute.value.query.cat); // 当前分类

let loadingStatus = ref(false); // 加载状态

// 所有歌单分类
let yz = reactive([]), // 语种
  fg = reactive([]), // 风格
  cj = reactive([]), // 场景
  qg = reactive([]), // 情感
  zt = reactive([]); // 主题
async function getAllSonglistCategory() {
  const res = (await allSonglistCategory()).data;
  res.sub?.forEach((item) => {
    if (item.category === 0) {
      yz.push(item.name);
    }
    if (item.category === 1) {
      fg.push(item.name);
    }
    if (item.category === 2) {
      cj.push(item.name);
    }
    if (item.category === 3) {
      qg.push(item.name);
    }
    if (item.category === 4) {
      zt.push(item.name);
    }
  });
}

// 跳转到歌单详情
function toSonglistDetail(id) {
  router.push(`/songListDetail/${id}`);
}

// 分类歌单列表
let playlist = reactive([]);
let total = ref(0); // 歌单数量
/**
 * 获取分类歌单
 * @param { number } limit 获取数量
 * @param { number } offset 偏移量
 * @param { string } name 分类名称
 */
function getSonglistByCategory(limit, offset, name) {
  loadingStatus.value = true;
  songlistByCategory(limit, offset, name).then(({ data }) => {
    slStore.changeCategory(data.cat);
    total = data.total;
    if (playlist.length > 0) {
      playlist.splice(0);
    }
    data.playlists?.forEach((item) => {
      playlist.push(item);
    });
    loadingStatus.value = false;
  });
}

// 分页
let currentPage = ref(1);
let pageSize = ref(50);
function handleCurrentChange(page) {
  getSonglistByCategory(
    pageSize.value,
    (page - 1) * pageSize.value,
    slStore.currentSonglistCategory
  );
}

// 切换分类
function changeCategory(category) {
  currentCategory.value = category;
  router.push(`/allSonglist?cat=${category}`);
}
const _changeCategory = proxy.lodash.throttle(changeCategory, 1000); // 节流函数

onBeforeRouteUpdate((to) => {
  currentPage.value = 1;
  getSonglistByCategory(pageSize.value, 0, to.query.cat);
});

function init() {
  getAllSonglistCategory();
  getSonglistByCategory(pageSize.value, 0, slStore.currentSonglistCategory);
}

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.allSonglistContainer {
  height: 820px;
  border: 1px solid #eee;
  background-color: #fff;
  margin: 10px auto;
  display: flex;

  // 歌单分类
  .categoryContainer {
    width: 300px;
    height: 100%;
    overflow: hidden;

    // 标题
    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      color: $main-color;

      h1 {
        margin: 0;
        padding: 0;
        font-size: 24px;
        margin-left: 20px;
      }
    }

    dl {
      width: 100%;
      height: 770px;
      margin: 0;
      padding: 0;
      overflow-y: scroll;
      overflow-x: hidden;

      dt {
        width: 300px;
        height: 35px;
        line-height: 35px;
        background-color: $light-color;
        font-size: 17px;
        padding-left: 20px;
        color: $main-color;
        position: sticky;
        top: 0;
        font-weight: bold;
      }

      dd {
        width: 280px;
        height: 30px;
        line-height: 30px;
        padding-left: 40px;
        margin: 0;
        cursor: pointer;
        color: #333;

        &:hover {
          background-color: $light-color;
        }
      }
    }
  }

  // 歌单列表
  .songlist {
    width: 880px;
    height: 100%;

    ul {
      width: 100%;
      height: 780px;
      margin: 0;
      margin-left: 10px;
      padding: 0;
      overflow-y: scroll;

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        margin: 0 13px;
      }
    }

    // 分页
    .demo-pagination-block {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: right;
    }
  }
}

.ddActive {
  background-color: $light-color;
  color: $main-color !important;
}
</style>
